<script setup lang="ts">
import { ref } from 'vue';
import {
    Document,
    Menu as IconMenu,
    Setting,
    Expand,
    Fold
} from '@element-plus/icons-vue'

const isCollapse = ref(false)

</script>

<template>
    <div>
        <div style="font-size: 40px;">
            <el-icon v-show="isCollapse" @click="isCollapse = !isCollapse">
                <Expand />
            </el-icon>
            <el-icon v-show="!isCollapse" @click="isCollapse = !isCollapse">
                <Fold />
            </el-icon>
        </div>
        <el-menu router unique-opened active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
            class="el-menu-vertical-demo" :collapse="isCollapse">
            <el-menu-item index="/">
                <el-icon><icon-menu /></el-icon>
                <template #title>首页</template>
            </el-menu-item>
            <el-menu-item index="/bar">
                <el-icon><icon-menu /></el-icon>
                <template #title>柱状图</template>
            </el-menu-item>
            <el-menu-item index="/line">
                <el-icon>
                    <document />
                </el-icon>
                <template #title>折线图</template>
            </el-menu-item>
            <el-menu-item index="/pie">
                <el-icon>
                    <setting />
                </el-icon>
                <template #title>饼图</template>
            </el-menu-item>
            <el-menu-item index="/radar">
                <el-icon>
                    <setting />
                </el-icon>
                <template #title>雷达图</template>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<style scoped lang="scss"></style>
